import React, { FC, memo, ReactNode, useEffect, useState } from "react";
import BaseSelectionBox from "../baseSelectionBox";

interface Iprops {
  children?: ReactNode;
  item: string;
}

const SelectionBox: FC<Iprops> = memo((props) => {
  const { item } = props;

  const [title, setTitle] = useState("默认标题");
  const [content, setContent] = useState({});

  useEffect(() => {
    switch (item) {
      case "size":
        setTitle("尺寸");
        setContent({
          middle: "中杯",
          big: "大杯",
        });
        break;
      case "ice":
        setTitle("温度");
        setContent({
          ice: "加冰",
          lessIce: "少冰",
          noIce: "去冰",
        });
        break;
      case "suger":
        setTitle("糖度");
        setContent({
          normalSuger: "正常糖",
          lessSuger: "少糖",
          halfSuger: "半糖",
          noSuger: "去糖",
        });
        break;
    }
  }, [item]);

  return (
    <div>
      <BaseSelectionBox title={title} content={content} />
    </div>
  );
});

export default SelectionBox;
